//首页横幅
'use strict';
import React, {Component} from 'react';
import Util from '../common/util';
import styles from '../style/styles';
import Swiper from 'react-native-swiper';
import Toast from '../common/ToastUtil'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

export default class HomeBanner extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loadedImg: false,
            dataindex: [],
            imgHeightList: [],
        };
        this.showBanner = this.showBanner.bind(this)
    }

    componentDidMount() {
        this.getBannerHeight(this.props.dataindex)
    }

    redirect(title, type, uri, gid, cid) {
        Toast.show(type)
        if (type == 1) {
            this.props.navigation.push('GoodsIndex',{
                goods_id:gid
            })
        } else if (type == 2) {
            this.props.navigation.push('GoodsList',{
                title:title,
                cate_id:cid
            })
        }
    }


    async getBannerHeight(urls) {
        try {

            let list = [];
            await urls.map((item, index) => {
                Image.getSize(item.source_url, (width, height) => {
                    let imgheight = Util.size.width * height / width;
                    list[index] = imgheight
                    LOG('list==' + list)
                    if (list.length == urls.length) {
                        this.setState({
                            imgHeightList: list,
                            loadedImg: true
                        })
                    }
                }, (error) => {
                    LOG('图片路径错误。。。。。。。。' + error);
                    urls.splice(index, 1)
                    this.getBannerHeight(urls)
                })
            })
        } catch (err) {
            LOG(err);
        }
    }

    banner() {
        let dataindex = this.props.dataindex;
        let imgHeightList = this.state.imgHeightList
        let rows;
        let list = [];
        for (let index = 0; index < dataindex.length; index++) {
            rows = (
                <TouchableOpacity key={dataindex[index].source_url}
                                  onPress={() => this.redirect(dataindex[index].title, dataindex[index].type, dataindex[index].target_url, dataindex[index].gid, dataindex[index].cid)}>
                    <Image
                        style={{width: Util.size.width, height: imgHeightList[index]}}
                        source={{uri: dataindex[index].source_url}}

                    />
                </TouchableOpacity>
            )
            list.push(rows);
        }
        return list;

    }


    showBanner() {
        return (
            <ScrollView horizontal={true}
                        ref={(c) => this.ScrollView = c}
                        showsHorizontalScrollIndicator={false}
                // onMomentumScrollEnd={(e) => {
                //     this._onAnimationEnd(e)
                // }}
                        pagingEnabled={true}>
                {this.banner()}
            </ScrollView>
        )
    }

    //图片滚动改变小圆点样式
    _onAnimationEnd(e) {
        let offsetX = e.nativeEvent.contentOffset.x;
        //求出当前页数
        let pageIndex = Math.floor(offsetX / Util.size.width);
        LOG('E=======' + pageIndex);
        //更改状态机
        this.setState({currentPage: pageIndex});
    }


    render() {
        return (
            <View style={{backgroundColor: "#fff"}}>
                {
                    this.state.loadedImg ?
                        <Swiper
                            showsButtons={false}
                            autoplay={true}
                            height={this.state.imgHeightList[0]}
                            paginationStyle={{bottom: 3,}}
                            pagingEnabled={false}
                            bounces={true}
                            autoplayTimeout={5}
                            activeDot={<View style={{
                                backgroundColor: '#f00',
                                width: 12,
                                height: 12,
                                borderRadius: 6,
                                marginLeft: 5,
                                marginRight: 5,
                                marginTop: 5,
                                marginBottom: 5,
                            }}/>}
                        >
                            {this.banner()}
                        </Swiper>
                        : null
                }

                {/*{this.showBanner()}*/}
            </View>
        )
    }
}